<template>
  <div class="openlayermap">
    <div
      style="height: 44px;"
    >
      <treeselect
        v-model="mapId"
        placeholder="选择"
        :max-height="300"
        :options="mapList"
        style="float: left; width: 200px"
        @input="nodeClick"
      />
    </div>
    <layermap :currentmap="currentMap" />
  </div>
</template>

<script>
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import layermap from './layermap'
import {
  sendThis,
  Load_Map,
  _iMap,
  _TransPixel,
  TagStyle,
  _Style,
  updateOverlayPosition,
  FenceStyle,
  _TransMetric,
  _TransMetric2,
  _TransMetric3,
  _TransMetricFence,
  _dPR,
  Load_Fence,
  FenceSource,
  Load_Fence2,
  FenceSource2
} from '@/views/layermap/layermaps.js'
import { getMapTree, getMap } from '@/api/location'
import {
  baseUrl
} from '@/utils/global'
import $ from 'jquery'
export default {
  components: {
    Treeselect,
    layermap
  },

  data() {
    return {
      mapId: '',
      mapList: [],
      currentMap: {}
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      // 加载地图树
      getMapTree().then((res) => {
        const RES = this.responseUse(res)
        if (typeof RES !== 'undefined') {
          this.mapList = RES
          sendThis(this)
          this.mapId = RES[0].id
        }
      })
    },
    nodeClick() {
      const self = this
      if (self.mapId === '' || self.mapId === undefined) {
        return
      }
      getMap(self.mapId).then((res) => {
        const RES = self.responseUse(res)
        if (RES != undefined) {
          self.currentMap = RES
        }
      })
    },
    nodeClick1() {}

  }
}
</script>

<style>
</style>
